<template>
    <div class="area">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>个人中心</span>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="个人信息" name="first">
                    <ul>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-iconuser"></use>
                            </svg>
                            <p>用户名称</p>
                            <div class="detailinfor">{{ name }}</div>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon_tree"></use>
                            </svg>
                            <p>所属部门</p>
                            <div class="detailinfor">{{ depart }}</div>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon_peoples"></use>
                            </svg>
                            <p>所属角色</p>
                            <div class="detailinfor">{{ role }}</div>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon_date"></use>
                            </svg>
                            <p>创建日期</p>
                            <div class="detailinfor">{{ createDate }}</div>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="6.25rem" class="passwordForm">
                        <el-form-item label="旧密码" prop="oldpass">
                            <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newpass">
                            <el-input type="password" v-model="ruleForm.newpass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <!-- <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
            </div> -->
        </el-card>
    </div>
</template>
<style scoped>
.area{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.box-card {
    width: 37.5rem;
    margin-top: 6.25rem;
}
li{
    border-bottom: .0625rem solid #e7eaec;
    border-top: .0625rem solid #e7eaec;
    /* margin-bottom: -0.0625rem;
    padding: .6875rem 0; */
    font-size: .875rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 2.5rem;
}
.icon{
    width: 1.25rem;
    height: 1.25rem;
}
.detailinfor{
    position: absolute;
    right: .625rem;
}
::v-deep .el-form-item__label{
    text-align: center;
    padding: 0;
    font-weight: 700;
}
::v-deep .el-form-item__label::before{
    content: "*";
    color: #ff4949;
    margin-right: .25rem;
    font-weight: 700;
}
::v-deep .el-form-item__content{
    margin-left: 0 !important;
    display: flex;
    justify-content: center;
}
</style>
<script>
import axios from 'axios';
// import {socket,establishCommunication} from '../assets/socket.js'
  export default {
    mounted(){
        // establishCommunication()
        this.username=this.$store.state.username
        this.password=this.$store.state.password
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入旧密码'));
            } else {
            if (value !== this.password) {
                callback(new Error('旧密码输入错误'));
            }
            callback();
            }
        };
        var validatePass1 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入新密码'));
            } 
            else {
            if (value == this.password) {
                callback(new Error('新密码不能和旧密码相同'));
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.newpass) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
      return {
        activeName: 'first',
        username:'',
        password:'',
        name:'吴翰',
        depart:'精益工程部',
        role:'管理员',
        createDate:'2025-02-05',
        statusCode:Object,
        ruleForm: {
            oldpass: '',
            newpass: '',
            checkPass: ''
        },
        rules: {
            oldpass: [
                { validator: validatePass, trigger: 'blur' }
            ],
            newpass: [
            { validator: validatePass1, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
        handleClick(tab, event) {
        console.log(tab, event);
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                axios.post('/myapp/monitor/modifyPassWord',{ userName:this.username, newPassWord:this.ruleForm.newpass }).then(res=>{
                    console.log(res.data)
                    this.statusCode=res.data.statusCode
                    if(this.statusCode==200)
                        alert('密码修改成功')
                    else
                        alert('密码修改失败')
                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        },
        // sendAndGetMessage(){
        //     axios.post('/modifyPassWord',{ userName:this.username, newPassWord:this.ruleForm.newpass }).then(res=>{
        //         console.log(res.data)
        //         this.statusCode=res.data.statusCode
        //         console.log(this.statusCode)
        //     })
        // }
    }
  };
</script>